JavaScript Asynkron Iteratorhjälpare: Scan - Asynkron Ackumulativ Bearbetning

Asynkron programmering är en hörnsten i modern JavaScript-utveckling, särskilt när man hanterar I/O-bundna operationer, som nätverksanrop eller filsystemsinteraktioner. Asynkrona iteratorer, introducerade i ES2018, tillhandahåller en kraftfull mekanism för att hantera strömmar av asynkron data. `scan`-hjälparen, som ofta finns i bibliotek som RxJS och blir alltmer tillgänglig som ett fristående verktyg, låser upp ännu mer potential för att bearbeta dessa asynkrona dataströmmar.

Förståelse för Asynkrona Iteratorer

Innan vi dyker in i `scan`, låt oss sammanfatta vad asynkrona iteratorer är. En asynkron iterator är ett objekt som följer det asynkrona iteratorprotokollet. Detta protokoll definierar en `next()`-metod som returnerar ett löfte (promise) som löser sig till ett objekt med två egenskaper: `value` (nästa värde i sekvensen) och `done` (en boolean som indikerar om iteratorn är klar). Asynkrona iteratorer är särskilt användbara när man arbetar med data som anländer över tid, eller data som kräver asynkrona operationer för att hämtas.

Här är ett grundläggande exempel på en asynkron iterator:

            
async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

async function main() {
  const iterator = generateNumbers();

  let result = await iterator.next();
  console.log(result); // { value: 1, done: false }

  result = await iterator.next();
  console.log(result); // { value: 2, done: false }

  result = await iterator.next();
  console.log(result); // { value: 3, done: false }

  result = await iterator.next();
  console.log(result); // { value: undefined, done: true }
}

main();

            

              
                Copy
              
            
          

Introduktion till `scan`-hjälparen

`scan`-hjälparen (även känd som `accumulate` eller `reduce`) transformerar en asynkron iterator genom att tillämpa en ackumulatorfunktion på varje värde och emittera det ackumulerade resultatet. Detta är analogt med `reduce`-metoden på arrayer, men fungerar asynkront och på iteratorer.

I grund och botten tar `scan` en asynkron iterator, en ackumulatorfunktion och ett valfritt initialt värde. För varje värde som emitteras av källiteratorn anropas ackumulatorfunktionen med det föregående ackumulerade värdet (eller det initiala värdet om det är den första iterationen) och det nuvarande värdet från iteratorn. Resultatet av ackumulatorfunktionen blir det nya ackumulerade värdet, som sedan emitteras av den resulterande asynkrona iteratorn.

Syntax och Parametrar

Den allmänna syntaxen för att använda `scan` är som följer:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  for await (const value of sourceIterator) {
    accumulatedValue = accumulator(accumulatedValue, value);
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

• `sourceIterator`: Den asynkrona iteratorn som ska transformeras.
• `accumulator`: En funktion som tar två argument: det föregående ackumulerade värdet och det nuvarande värdet från iteratorn. Den bör returnera det nya ackumulerade värdet.
• `initialValue` (valfri): Det initiala värdet för ackumulatorn. Om det inte anges kommer det första värdet från källiteratorn att användas som initialt värde, och ackumulatorfunktionen kommer att anropas från och med det andra värdet.

Användningsfall och Exempel

`scan`-hjälparen är otroligt mångsidig och kan användas i en mängd olika scenarier som involverar asynkrona dataströmmar. Här är några exempel:

1. Beräkna en löpande summa

Föreställ dig att du har en asynkron iterator som emitterar transaktionsbelopp. Du kan använda `scan` för att beräkna en löpande summa av dessa transaktioner.

            
async function* generateTransactions() {
  yield 10;
  yield 20;
  yield 30;
}

async function main() {
  const transactions = generateTransactions();
  const runningTotals = scan(transactions, (acc, value) => acc + value, 0);

  for await (const total of runningTotals) {
    console.log(total); // Output: 10, 30, 60
  }
}

main();

            

              
                Copy
              
            
          

I detta exempel lägger `accumulator`-funktionen helt enkelt till det aktuella transaktionsbeloppet till den föregående summan. `initialValue` på 0 säkerställer att den löpande summan börjar på noll.

2. Ackumulera data i en array

Du kan använda `scan` för att ackumulera data från en asynkron iterator i en array. Detta kan vara användbart för att samla in data över tid och bearbeta den i batcher.

            
async function* fetchData() {
  yield { id: 1, name: 'Alice' };
  yield { id: 2, name: 'Bob' };
  yield { id: 3, name: 'Charlie' };
}

async function main() {
  const dataStream = fetchData();
  const accumulatedData = scan(dataStream, (acc, value) => [...acc, value], []);

  for await (const data of accumulatedData) {
    console.log(data); // Output: [{id: 1, name: 'Alice'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
  }
}

main();

            

              
                Copy
              
            
          

Här använder `accumulator`-funktionen spread-operatorn (`...`) för att skapa en ny array som innehåller alla föregående element och det nuvarande värdet. `initialValue` är en tom array.

3. Implementera en Rate Limiter (hastighetsbegränsare)

Ett mer komplext användningsfall är att implementera en rate limiter (hastighetsbegränsare). Du kan använda `scan` för att spåra antalet anrop som görs inom ett visst tidsfönster och fördröja efterföljande anrop om hastighetsgränsen överskrids.

            
async function* generateRequests() {
  // Simulate incoming requests
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 200));
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  yield Date.now();
}

async function main() {
  const requests = generateRequests();
  const rateLimitWindow = 1000; // 1 second
  const maxRequestsPerWindow = 2;

  async function* rateLimitedRequests(source, window, maxRequests) {
    let queue = [];
    for await (const requestTime of source) {
      queue.push(requestTime);
      queue = queue.filter(t => requestTime - t < window);

      if (queue.length > maxRequests) {
        const earliestRequest = queue[0];
        const delay = window - (requestTime - earliestRequest);
        console.log(`Rate limit exceeded. Delaying for ${delay}ms`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
      yield requestTime;
    }
  }

  const limited = rateLimitedRequests(requests, rateLimitWindow, maxRequestsPerWindow);

  for await (const requestTime of limited) {
    console.log(`Request processed at ${requestTime}`);
  }
}

main();

            

              
                Copy
              
            
          

Detta exempel använder `scan` internt (i `rateLimitedRequests`-funktionen) för att upprätthålla en kö av tidsstämplar för anrop. Den kontrollerar om antalet anrop inom hastighetsgränsfönstret överskrider det maximalt tillåtna. Om så är fallet beräknar den nödvändig fördröjning och pausar innan den yieldar anropet.

4. Bygga en datainsamlare i realtid (Globalt exempel)

Tänk dig en global finansiell applikation som behöver aggregera aktiekurser i realtid från olika börser. En asynkron iterator skulle kunna strömma kursuppdateringar från börser som New York Stock Exchange (NYSE), London Stock Exchange (LSE) och Tokyo Stock Exchange (TSE). `scan` kan användas för att upprätthålla ett löpande medelvärde eller högsta/lägsta pris för en viss aktie över alla börser.

            
// Simulate streaming stock prices from different exchanges
async function* generateStockPrices() {
  yield { exchange: 'NYSE', symbol: 'AAPL', price: 170.50 };
  yield { exchange: 'LSE', symbol: 'AAPL', price: 170.75 };
  await new Promise(resolve => setTimeout(resolve, 50));
  yield { exchange: 'TSE', symbol: 'AAPL', price: 170.60 };
}

async function main() {
  const stockPrices = generateStockPrices();

  // Use scan to calculate a running average price
  const runningAverages = scan(
    stockPrices,
    (acc, priceUpdate) => {
      const { total, count } = acc;
      return { total: total + priceUpdate.price, count: count + 1 };
    },
    { total: 0, count: 0 }
  );

  for await (const averageData of runningAverages) {
    const averagePrice = averageData.total / averageData.count;
    console.log(`Running average price: ${averagePrice.toFixed(2)}`);
  }
}

main();

            

              
                Copy
              
            
          

I detta exempel beräknar `accumulator`-funktionen den löpande summan av kurserna och antalet mottagna uppdateringar. Det slutliga medelpriset beräknas sedan från dessa ackumulerade värden. Detta ger en realtidsvy av aktiekursen över olika globala marknader.

5. Analysera webbplatstrafik globalt

Föreställ dig en global webbanalysplattform som tar emot strömmar av data om webbplatsbesök från servrar runt om i världen. Varje datapunkt representerar en användare som besöker webbplatsen. Med `scan` kan vi analysera trenden för sidvisningar per land i realtid. Låt oss säga att datan ser ut så här: `{ country: "US", page: "homepage", timestamp: 1678886400 }`.

            
async function* generateWebsiteVisits() {
  yield { country: 'US', page: 'homepage', timestamp: Date.now() };
  yield { country: 'CA', page: 'product', timestamp: Date.now() };
  yield { country: 'UK', page: 'blog', timestamp: Date.now() };
  yield { country: 'US', page: 'product', timestamp: Date.now() };
}

async function main() {
  const visitStream = generateWebsiteVisits();

  const pageViewCounts = scan(
    visitStream,
    (acc, visit) => {
      const { country } = visit;
      const newAcc = { ...acc };
      newAcc[country] = (newAcc[country] || 0) + 1;
      return newAcc;
    },
    {}
  );

  for await (const counts of pageViewCounts) {
    console.log('Page view counts by country:', counts);
  }
}

main();

            

              
                Copy
              
            
          

Här uppdaterar `accumulator`-funktionen en räknare för varje land. Utdata skulle visa de ackumulerande sidvisningsräkningarna för varje land när ny besöksdata anländer.

Fördelar med att använda `scan`

`scan`-hjälparen erbjuder flera fördelar när man arbetar med asynkrona dataströmmar:

• Deklarativ stil: `scan` låter dig uttrycka ackumulativ bearbetningslogik på ett deklarativt och koncist sätt, vilket förbättrar kodens läsbarhet och underhållbarhet.
• Asynkron hantering: Den hanterar sömlöst asynkrona operationer inom ackumulatorfunktionen, vilket gör den lämplig för komplexa scenarier som involverar I/O-bundna uppgifter.
• Realtidsbearbetning: `scan` möjliggör realtidsbearbetning av dataströmmar, vilket låter dig reagera på förändringar när de inträffar.
• Komponerbarhet: Den kan enkelt komponeras med andra asynkrona iteratorhjälpare för att skapa komplexa databearbetningskedjor.

Implementera `scan` (om den inte är tillgänglig)

Medan vissa bibliotek tillhandahåller en inbyggd `scan`-hjälpare, kan du enkelt implementera din egen om det behövs. Här är en enkel implementering:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  let first = true;
  for await (const value of sourceIterator) {
    if (first && initialValue === undefined) {
      accumulatedValue = value;
      first = false;
    } else {
      accumulatedValue = accumulator(accumulatedValue, value);
    }
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

Denna implementering itererar över källiteratorn och tillämpar ackumulatorfunktionen på varje värde, och yieldar det ackumulerade resultatet. Den hanterar fallet där inget `initialValue` anges genom att använda det första värdet från källiteratorn som initialt värde.

Jämförelse med `reduce`

Det är viktigt att skilja `scan` från `reduce`. Medan båda opererar på iteratorer och använder en ackumulatorfunktion, skiljer de sig i sitt beteende och utdata.

• `scan` emitterar det ackumulerade värdet för varje iteration, vilket ger en löpande historik över ackumuleringen.
• `reduce` emitterar endast det slutliga ackumulerade värdet efter att ha bearbetat alla element i iteratorn.

Därför är `scan` lämplig för scenarier där du behöver spåra de mellanliggande tillstånden av ackumuleringen, medan `reduce` är lämplig när du bara behöver det slutliga resultatet.

Felhantering

När man arbetar med asynkrona iteratorer och `scan` är det avgörande att hantera fel på ett elegant sätt. Fel kan uppstå under iterationsprocessen eller inom ackumulatorfunktionen. Du kan använda `try...catch`-block för att fånga och hantera dessa fel.

            
async function* generatePotentiallyFailingData() {
  yield 1;
  yield 2;
  throw new Error('Something went wrong!');
  yield 3;
}

async function main() {
  const dataStream = generatePotentiallyFailingData();

  try {
    const accumulatedData = scan(dataStream, (acc, value) => acc + value, 0);

    for await (const data of accumulatedData) {
      console.log(data);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

main();

            

              
                Copy
              
            
          

I detta exempel fångar `try...catch`-blocket felet som kastas av `generatePotentiallyFailingData`-iteratorn. Du kan sedan hantera felet på lämpligt sätt, till exempel genom att logga det eller försöka operationen igen.

Sammanfattning

`scan`-hjälparen är ett kraftfullt verktyg för att utföra asynkron ackumulativ bearbetning på JavaScripts asynkrona iteratorer. Den låter dig uttrycka komplexa datatransformationer på ett deklarativt och koncist sätt, hantera asynkrona operationer elegant och bearbeta dataströmmar i realtid. Genom att förstå dess funktionalitet och användningsfall kan du utnyttja `scan` för att bygga mer robusta och effektiva asynkrona applikationer. Oavsett om du beräknar löpande summor, ackumulerar data i arrayer, implementerar rate limiters eller bygger datainsamlare i realtid, kan `scan` förenkla din kod och förbättra dess övergripande prestanda. Kom ihåg att överväga felhantering och att välja `scan` över `reduce` när du behöver tillgång till mellanliggande ackumulerade värden under bearbetningen av dina asynkrona dataströmmar. Att utforska bibliotek som RxJS kan ytterligare förbättra din förståelse och praktiska tillämpning av `scan` inom reaktiva programmeringsparadigm.